<script>
/**
 * 品牌
 * @author:Mumu
 * @date:
 */
import Mod from './matterwrite'
export default {
	components:{
		Mod
	},
	data(){
		return {
			field:[{
				title: '',
				width:'30px',
				slots: { customRender: 'checked' }
			},{
				title: '#',
				width:'30px',
				customRender: ({index}) => index+1
			}, {
				title: '分类',
				dataIndex: 'name',
			}, {
				title: '资源类型',
				dataIndex: 'type',
				customRender: ({text}) => ['','','图片','视频'][text]
			}, {
				title: '媒体资源',
				dataIndex: 'src',
				width:'450px',
				slots: { customRender: 'src' }
			}, {
				title: '封面',
				dataIndex: 'thumb',
				width:'350px',
				slots: { customRender: 'thumb' }
			},{
				title: '发布人',
				dataIndex: 'adduser',
			}, {
				title: '发布时间',
				dataIndex: 'create_time',
			}, {
				title: '操作',
				align: "center",
				width: "200px",
				dataIndex: 'action',
				fixed: 'right',
				slots: { customRender: 'action' }
			}],//表头
			sellist:[],//选项列表
			list:[],//列表
			pagination: {
				defaultCurrent: 1,
				current: 1,
				defaultPageSize: 10,
				pageSize: 10,
				showQuickJumper: true,
				showSizeChanger: true,
				showTotal: (total, range) => `共${total}条`,
				total: 0,
			},
			listloading:false,
			search:{},
			previewVisible:false,
			previewImage:'',
		}
	},
	created(){
		this.getclass();
	},
	mounted() {
		this.$nextTick(()=>{
			this.getList();
		})
	},
	methods:{
		async getclass(){
			let rs	=	await this.muajax.Ysclist();
			if(rs.status==200){
				this.sellist=this.tosort([],rs.data,0,0,'');
			}
		},//获取分类
		tosort(arr,list,fid=0,lev,prestring){
			list.forEach(item=>{
				if(item.fid==fid){
					item.lev=lev;
					item.prefixname=prestring+item.name;
					arr.push(item)
					this.tosort(arr,list,item.id,lev+1,prestring+'|-- ');
				}
			})
			return arr;
		},//排序
		async getList() {
			if(this.listloading) return;
			this.listloading		=	true;
			let rs	=	await this.muajax.YssList({
				...this.search,
				page:this.pagination.current,
				size:this.pagination.pageSize,
			});
			this.listloading		=	false;
			// if (rs.status!=200) return;
			if ( this.pagination.current == 1 ){
				this.records		=	[];
			}
			this.list=rs.data;
			this.pagination.total=rs.sum;
		},//列表
		async del(k){
			if(!await this.$showfirm('确定要删除该数据吗？')) return;
			let rs = await this.muajax.YssDel({
				ids:[this.list[k].id]
			});
			if(rs.status==200){
				this.$message.success('删除成功');
				if(this.list.length==1){
					this.research();
				}else{
					this.getList();
				}
				
			}
		},//删除
		async delAll(){
			let arr =[];
			this.list.forEach(item=>{
				if(item.checked){
					arr.push(item.id)
				}
			})
			if(arr.length==0){
				this.$message.info('请选择要操作的数据');
				return;
			}
			if(!await this.$showfirm('确定要删除所有已选数据吗？')) return;
			let rs = await this.muajax.YssDel({
				ids:arr
			});
			if(rs.status==200){
				this.$message.success('删除成功');
				if(this.list.length==1){
					this.research();
				}else{
					this.getList();
				}
				
			}
		},//批量删除
		async settype(v,type){
			let rs	=	await this.muajax.fodsettype({
				id:v.id,
				type
			});
			if(rs.status==200){
				v.type=type;
				this.$message.success(type==2?'审核为通过':'审核为不通过');
			}
		},//获取分类
		research(){
			this.pagination.current=1;
			this.getList();
		},//搜索重置
		applysDataTableChangeHandle(pagination, filters, sorter) {
			this.pagination.current		= pagination.current;
			this.pagination.pageSize	= pagination.pageSize;
			this.getList();
		},//操作分页控制
		handleChange(info,record){
			console.log('info',info.file.status,info)
			if (info.file.status === 'uploading') {
				this.loading = true;
				return;
			}
			if (info.file.status === 'done') {
				this.$message.success('上传成功');
				record.thumb=info.file.response.path;
				this.loading = false;
			}
			if (info.file.status === 'error') {
				this.loading = false;
				this.$message.error('设置失败，请重试');
			}
		},
	},
	computed: {

	},
}
</script>
<template>

	<a-card>
		<a-form layout="inline" class="text-center">
			<a-form-item label="搜索">
				<a-select
					placeholder="请选择分类"
					style="width:180px"
					:dropdownMatchSelectWidth="false"
					v-model:value="search.fid"
					:allowClear="true"
				>
					<a-select-option v-for="v in sellist" :key="v.id">{{ v.prefixname }}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item>
				<a-select
					placeholder="请选择资源类型"
					style="width:180px"
					:dropdownMatchSelectWidth="false"
					v-model:value="search.type"
					:allowClear="true"
				>
					<a-radio :value="2">图片</a-radio>
					<a-radio :value="3">视频</a-radio>
				</a-select>
			</a-form-item>
			<!-- <a-form-item>
				<a-input
					v-model:value="search.keyword"
					placeholder="请输入关键词"
					style="width:250px"
				/>
			</a-form-item> -->
			<a-form-item>
				<a-range-picker
                    @change="data=>[search.timeStart,search.timeEnd]=data"
                    format="YYYY/MM/DD"
                    valueFormat="YYYY/MM/DD"
                    :placeholder="['上传时间范围开始','上传时间范围结束']"
                />
			</a-form-item>
			<a-form-item>
				<a-space>
					<a-button type="primary" @click="research()">搜索</a-button>
					<!-- <a-button type="default">重置</a-button> -->
				</a-space>
			</a-form-item>
		</a-form>
		<div class="mm-t-20 mm-b-15">
			<a-space>
				<a-button type="primary" @click="$refs.mod.show(true,sellist)">+ 新建</a-button>
				<a-button type="primary" danger @click="delAll()">删除</a-button>
			</a-space>
		</div>


		<a-table
			:columns="field"
			:data-source="list"
			:pagination="pagination"
			:loading="listloading"
			:scrollToFirstRowOnChange="true"
			@change="page=>applysDataTableChangeHandle(page)"
			size="small"
			:row-key="(record)=>JSON.stringify(record)"
		>
			<template #checked="{record}">
				<a-checkbox v-model:checked="record.checked"></a-checkbox>
			</template>
			<template #src="{record}">
				<div v-if="record.type==3">
					<a-button :href="record.src" target="_bank">查看视频<PlayCircleOutlined /></a-button>
				</div>
				<div v-else>
					<a-button @click="previewImage=record.src; previewVisible=true">查看图片<PictureOutlined /></a-button>
				</div>
			</template>
			<template #thumb="{record,index}">
				<div v-show="record.type==3">
					<a-image
						:width="80"
						:src="record.thumb"
						alt="暂无封面"
					/>
					<a-upload
						name="file"
						accept="image/*"
						:action="muajax.inst.defaults.baseURL+muajax.api.YscVideoThumb.url"
						:data="{marketid:$store.state.user.market,id:record.id}"
						@change="(info)=>handleChange(info,record)"
						:showUploadList="false"
					>
						<a-button class="mm-l-10" :ghost="!!record.thumb" type="primary" :loading="record.loading">
							<loading-outlined v-if="record.loading"></loading-outlined>
							<upload-outlined v-else></upload-outlined>
							{{ record.thumb?'修改封面':'设置封面' }}
						</a-button>
					</a-upload>
				</div>
			</template>
			<template #action="{record,index}">
				<a-space>
					<a-button type="primary" danger @click="del(index)" title="删除">
						<template #icon>
							<DeleteOutlined />
						</template>
					</a-button>
				</a-space>
			</template>
		</a-table>

	</a-card>
	<Mod ref="mod" />
	<a-modal :visible="previewVisible" :footer="null" @cancel="()=>previewVisible=false">
		<img alt="example" style="width: 100%" :src="previewImage" />
	</a-modal>
</template>
<style lang="less" scoped>

</style>